<template>
  <div class="add-api">
    <el-table :data="tableData" border :stripe="true" style="width: 100%">
      <el-table-column prop="name" label="说明"></el-table-column>
      <el-table-column prop="field" label="字段"></el-table-column>
      <el-table-column prop="value" label="值">
        <template slot-scope="scope">
          <el-switch v-if="scope.row.type === 'switch'" v-model="scope.row.mod"
            :on-text="scope.row.onText" :off-text="scope.row.offText">
          </el-switch>
          <el-radio-group v-else-if="scope.row.type === 'radio'" v-model="scope.row.text" size="small">
            <el-radio-button v-for="radio in scope.row.arr" :label="radio.v" :key="radio.k"></el-radio-button>
          </el-radio-group>
          <el-slider v-else-if="scope.row.type === 'slider'" v-model="scope.row.value"
            :min="scope.row.min" :max="scope.row.max" show-input>
          </el-slider>
          <el-button @click="submit" type="primary" v-else-if="scope.row.type === 'submit'">提交</el-button>
          <el-input v-else v-model="scope.row.value" :disabled="scope.row.disabled"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import {addApiUrl} from '../assets/js/setting.js'
  export default {
    data () {
      return {
        addApiUrl: addApiUrl,
        tableData: [
          {name: '接口名称', field: 'name', value: ''},
          {name: '类ID', field: 'api_cate_id', value: this.$route.params.cate, disabled: true},
          {name: '动作标志', field: 'action_flag', value: ''},
          // {name: '请求地址', field: 'url', value: ''},
          {name: '模块', field: 'module', value: ''},
          // {name: '目录', field: 'dir', value: ''},
          {name: '控制器', field: 'controller', value: ''},
          {name: '方法', field: 'action', value: ''},
          {name: '方法的参数', field: 'text_data', value: '{}'},
          {name: '参数的说明', field: 'text_data_info', value: ''},
          {name: '需要登录', field: 'need_login', value: '1', mod: true, type: 'switch', onText: '是', offText: '否'},
          {name: '状态', field: 'status', value: '1', mod: true, type: 'switch', onText: '开', offText: '关'},
          {name: '作者', field: 'author', value: ''},
          {name: '排序', field: 'order', value: 100, type: 'slider', min: 0, max: 200},
          {
            name: '进度',
            field: 'job_schedule',
            value: '0',
            text: '未做',
            type: 'radio',
            arr: [
              {k: '-2', v: '正在'},
              {k: '-1', v: '废弃'},
              {k: '0', v: '未做'},
              {k: '1', v: '完成'}
            ]
          },
          {name: '', field: '', value: '提交', type: 'submit'}
        ]
      }
    },
    watch: {
      tableData: {
        handler (val, oldVal) {
          // console.log('val:', val)
          for (let i = 0; i < val.length; i++) {
            if (val[i].field === 'job_schedule') {
              for (let j = 0; j < val[i].arr.length; j++) {
                if (val[i].text === '') {
                  val[i].value = ''
                } else if (val[i].arr[j].v === val[i].text) {
                  val[i].value = val[i].arr[j].k
                }
              }
            } else if (val[i].type === 'switch') {
              if (val[i].mod === true) {
                val[i].value = '1'
              } else {
                val[i].value = '0'
              }
            }
          }
        },
        deep: true
      }
    },
    methods: {
      // 提交创建API
      submit () {
        let sendData = {}
        let len = this.tableData.length - 1
        for (let i = 0; i < len; i++) {
          if (this.tableData[i].value !== '') {
            sendData[this.tableData[i].field] = this.tableData[i].value
          } else {
            this.$message.warning('请填写:[' + this.tableData[i].name + ']字段')
            return
          }
        }
        let loading = this.$loading({fullscreen: true, text: '正在创建api接口...'})
        this.$http(this.addApiUrl, {params: sendData})
        .then((response) => {
          loading.close()
          if (response.status === 200) {
            if (response.data.status === 1) {
              this.$message({
                message: response.data.msg,
                type: 'success'
              })
              this.$router.push({name: 'Doc', path: '/doc'})
              // this.getCate()
            } else {
              this.$message({
                message: response.data.msg,
                type: 'warning'
              })
            }
          } else {
            this.$message({
              message: '网络错误:' + response.data.status,
              type: 'error'
            })
          }
        })
        .catch((err) => {
          loading.close()
          console.log('err:', err)
        })
      }
    }
  }
</script>
<style scoped>
  .add-api{
    margin-top: 60px;
  }
</style>
